<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form :inline="true" :model="chaxun" class="demo-form-inline form_top">
        <el-form-item
          label="设备编号:"
          extra
          style="font-size: 16px; font-weight: 400"
        >
          <el-input v-model="chaxun.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="chaxnun"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- form表单下按钮 -->
      <div class="button_top">
        <!-- 新增按钮 -->
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="xingZheng"
        >新建</el-button>
        <el-button type="primary" class="buttonbodyfoot" @click="piLiangCaoZuo">批量操作</el-button>

        <!-- table表格 -->
        <el-table
          v-loading="loading"
          size="mini"
          :data="tableData"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column size="mini" type="selection" width="55" />
          <el-table-column
            size="mini"
            prop="id"
            label="序号"
            width="80px"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="innerCode"
            label="设备编号"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="type.name"
            label="设备型号"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="node.name"
            label="详细地址"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="ownerName"
            label="合作商"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="vmStatus"
            label="设备状态"
            align="center"
          >
            <template #default="{ row }">
              <span>{{
                row.vmStatus === 1
                  ? '运营'
                  : row.vmStatus === 0
                    ? '未投放'
                    : '撤机'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="160px"
          >
            <template #default="{row}">
              <el-button type="text" class="button_table_foot">货道</el-button>
              <el-button
                type="text"
                class="button_table_foot"
                @click="celueguanliyade(row)"
              >策略</el-button>
              <el-button
                type="text"
                class="button_table_foot"
                @click="xiiugai(row)"
              >修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>
            共{{ totalCount }}条记录 第 {{ yeshu.pageIndex }}/{{ totalPage }}
            页
          </p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              class="foot_button_top"
              :disabled="yeshu.pageIndex <= 1 ? true : false"
              @click="handleSizeChange"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              :disabled="yeshu.pageIndex >= totalPage ? true : false"
              @click="handleCurrentChange"
            >下一页</el-button>
          </div>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog
        width="600px"
        title="修改设备"
        :visible.sync="dialogFormVisible"
        class="dia"
      >
        <el-form label-width="200px">
          <el-form-item label="机器编号:">
            <span>{{ row.innerCode }}</span>
          </el-form-item>
          <el-form-item label="供货时间:">
            <span>{{ row.lastSupplyTime }}</span>
          </el-form-item>
          <el-form-item label="设备类型:">
            <span>{{ rowname.name }}</span>
          </el-form-item>
          <el-form-item label="设备容量:">
            <span>{{ rowname.channelMaxCapacity }}</span>
          </el-form-item>
          <el-form-item label="设备点位:">
            <el-select v-model="node.name">
              <el-option
                v-for="item in currentPageRecords"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="合作商:">
            <span>{{ row.ownerName }}</span>
          </el-form-item>
          <el-form-item label="所属区域:">
            <span>{{ region.name }}</span>
          </el-form-item>
          <el-form-item label="设备地址:">
            <span>{{ node.addr }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dianweiqueding">确 定</el-button>
        </div>
      </el-dialog>

      <!-- xingzheng弹窗 -->
      <el-dialog
        width="600px"
        title="新增设备"
        :visible.sync="xingZhengTanChuan"
        class="dia"
      >
        <el-form ref="xingZhengsdas" :model="xingZhengsdas" label-width="200px">
          <el-form-item label="设备编号:">
            <span>系统自动生成</span>
          </el-form-item>
          <el-form-item
            prop="vmType"
            label="选择型号"
            :rules="{ required: true, message: '请选择', trigger: 'change' }"
          >
            <el-select v-model="xingZhengsdas.vmType" placeholder="请选择">
              <el-option
                v-for="item in xuanzeshebei"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="nodeId"
            label="选择点位"
            :rules="{ required: true, message: '请选择', trigger: 'change' }"
          >
            <el-select v-model="xingZhengsdas.nodeId" placeholder="请选择">
              <el-option
                v-for="item in currentPageRecords"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaoleya">取 消</el-button>
          <el-button
            type="primary"
            @click="xingzengqueding('xingZhengsdas')"
          >确 定</el-button>
        </div>
      </el-dialog>

      <!-- 策略弹窗 -->
      <el-dialog
        width="600px"
        :title="quxiaocelueasdasdasd"
        :visible.sync="celueguanli"
        class="dia"
      >
        <el-form v-if="yingasdasdasd===1 ? true :false" label-width="200px">
          <el-form-item label="机器编号:">
            <span>{{ ceLueGuanLiYa.innerCode }}</span>
          </el-form-item>
          <el-form-item label="策略名称:">
            <span>{{ ceLueGuanLiYa.policyName }}</span>
          </el-form-item>
          <el-form-item label="策略方案:">
            <span>{{ ceLueGuanLiYa.discount }} %</span>
          </el-form-item>
        </el-form>
        <el-form v-else label-width="200px">
          <el-form-item
            label="选择策略"
          >
            <el-select v-model="xuanzheceLue.policyId" placeholder="请选择">
              <el-option
                v-for="item in policyName"
                :key="item.policyId"
                :label="item.policyName"
                :value="item.policyId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div v-if="yingasdasdasd===1 ? true :false" slot="footer" class="dialog-footer">
          <el-button size="small" type="warning" plain class="quxiaocaozou" @click="quxiaocelue">取消策略</el-button>
        </div>
        <div v-else slot="footer" class="dialog-footer">
          <el-button size="small" type="warning" plain @click="celuequxiao">取消</el-button>
          <el-button size="small" type="warning" plain @click="xeluexiugai">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { add, dianWeiLieBiao, dianWeiXiuGai, shouHouLieBiao, xingZengShouHouJi, shouHouJi, ceLueBiaoYaLe, xiuGaiCeLue } from '@/api/equipment'
export default {
  name: 'SheDei',
  data() {
    return {
      xuanzheceLue: { policyName: null, discount: null, policyId: null },
      policyName: [],
      yingasdasdasd: null,
      quxiaocelueasdasdasd: '',
      ceLueGuanLiYa: [],
      celueguanli: false,
      xingZhengTanChuan: false,
      dialogFormVisible: false,
      loading: false,
      tableData: [],
      row: [],
      region: [],
      node: [],
      valieId: '',
      rowname: '',
      currentPageRecords: [],
      yeshu: { pageIndex: '1', pageSize: '10' },
      yeshus: { pageIndex: '1', pageSize: '100000' },
      chaxun: { pageIndex: '1', pageSize: '10', innerCode: '', status: '' },
      xiugaiDianWei: { id: '', nodeId: '' },
      totalCount: '',
      totalPage: '',
      xingZhengsdas: { vmType: '', nodeId: '', createUserId: '1' },
      xuanzeshebei: []
    }
  },
  // 渲染数据
  created() {
    this.shujuhouqu()
  },
  methods: {
    // 获取数据
    async shujuhouqu() {
      const data = await add(this.yeshu)
      this.loading = true
      this.tableData = data.currentPageRecords
      this.loading = false
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      this.yeshu.pageIndex = data.pageIndex
      this.yeshu.pageSize = data.pageSize
    },
    async chaxnun() {
      this.loading = true
      const data = await add(this.chaxun)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    // 修改
    async xiiugai(row) {
      const data = await dianWeiLieBiao(this.yeshus)
      this.currentPageRecords = data.currentPageRecords
      this.dialogFormVisible = true
      this.row = row
      this.rowname = row.type
      this.region = row.region
      this.node = row.node
      this.xiugaiDianWei.id = row.id
    },
    // 修改确定
    async dianweiqueding() {
      // this.dialogFormVisible = false
      // const list = await dianWeiXiuGai()
      if (typeof this.node.name === String) {
        this.loading = true
        const data = await add(this.yeshu)
        this.tableData = data.currentPageRecords
        this.loading = false
        this.dialogFormVisible = false
      } else {
        this.xiugaiDianWei.nodeId = this.node.name
        await dianWeiXiuGai(this.xiugaiDianWei)
        this.loading = true
        const data = await add(this.yeshu)
        this.tableData = data.currentPageRecords
        this.loading = false
        this.dialogFormVisible = false
      }
    },
    // 取消
    quxiaoleya() {
      this.celueguanli = false
      this.xingZhengTanChuan = false
      this.xingZhengsdas = { dianwei: '', xinghang: '' }
    },
    // 新增
    async xingZheng() {
      const data = await dianWeiLieBiao(this.yeshus)
      this.currentPageRecords = data.currentPageRecords
      const list = await shouHouLieBiao(this.yeshus)
      this.xuanzeshebei = list.currentPageRecords
      this.xingZhengTanChuan = true
    },
    // 新增确定
    xingzengqueding(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          await xingZengShouHouJi(this.xingZhengsdas)
          this.xingZhengTanChuan = false
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message.error('添加失败')
          return false
        }
      })
    },
    // 策略管理
    async celueguanliyade(dataList) {
      this.yingasdasdasd = 1
      this.quxiaocelueasdasdasd = '策略管理'
      const data = await shouHouJi({ innerCode: dataList.innerCode })
      console.log(data)
      this.ceLueGuanLiYa = data
      this.celueguanli = true
      const wuyuleya = await ceLueBiaoYaLe()
      this.policyName = wuyuleya
      console.log(this.policyName)
    },
    // 取消策略按钮
    celuequxiao() {
      this.celueguanli = false
      this.xuanzheceLue = { policyName: null, discount: null, policyId: null }
    },
    // 策略确定
    async xeluexiugai() {
      await xiuGaiCeLue(this.xuanzheceLue)
    },
    quxiaocelue() {
      this.yingasdasdasd = 2
    },
    // 批量操作
    async piLiangCaoZuo() {
      this.yingasdasdasd = 2
      this.quxiaocelueasdasdasd = '批量策略管理'
      const wuyuleya = await ceLueBiaoYaLe()
      this.policyName = wuyuleya
      this.celueguanli = true
    },
    // 换页
    async handleSizeChange() {
      this.loading = true
      this.yeshu.pageIndex--
      const data = await add(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    async handleCurrentChange() {
      this.loading = true
      this.yeshu.pageIndex++
      const data = await add(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    }

  }
}
</script>

<style scoped lang="scss">
.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    color: #000;
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .touXiang {
      display: block;
      width: 26px;
      height: 26px;
      object-fit: cover;
      border-radius: 50%;
      background: #f3f6fb;
      border: 1px solid #f3f6fb;
      margin: 0 auto;
    }
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
